<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: 星星在唱歌
  Date: 2022/3/17
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/bootstarp/bootstrap.css">
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstarp/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstarp/bootstrap-paginator.js"></script>
</head>
<body>

<div class="container">
    <h1>图书借阅系统</h1>
    <br><br>
    <div><span>当前用户:${username}</span>&nbsp;&nbsp;<a href="/users/exit">登出</a></div>
    <form action="${pageContext.request.contextPath}/book/main" method="post" name="form1" class="form-inline">
        <input type="hidden" name="pageNum" id="pageNum">
        <div class="form-group">
            <label for="" class="">类型:</label>
            <select name="bookType" id="" class="form-control">
                <option value="">==请选择==</option>
                <%--使用jstl标签来动态加载下拉框数据--%>
                <c:forEach items="${type}" var="t">
                    <option value="${t.id}" <c:if test="${bookType == t.id}">selected</c:if>>${t.typename}</option>
                </c:forEach>
            </select>
        </div>&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <label for="" class="">图书名称:</label>
            <input type="text" name="bookName" value="${bookName}" class="form-control">
        </div>&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <label for="" class="">是否借阅:</label>
            <select name="isBorrow" class="form-control">
                <option value="">==请选择==</option>
                <option value="1" <c:if test="${isBorrow == '1'}">selected</c:if>>已借阅</option>
                <option value="0" <c:if test="${isBorrow == '0'}">selected</c:if>>未借阅</option>
            </select>
        </div>&nbsp;&nbsp;&nbsp;
        <input type="submit" value="查询" class="btn btn-primary">
    </form>

    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>图书编号</th>
            <th>图书分类</th>
            <th>图书名称</th>
            <th>作者</th>
            <th>出版社</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <c:forEach items="${book.list}" var="b">
            <tr>
                <td>${b.bookCode}</td>
                <td>${b.typeName}</td>
                <td>${b.bookName}</td>
                <td>${b.bookAtuthor}</td>
                <td>${b.publishPress}</td>
                <td><c:if test="${b.isBorrow == 0}">
                    <a>申请借阅</a>
                </c:if><c:if test="${b.isBorrow == 1}">
                    <span style="color: red">已借阅</span>
                </c:if></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>


    <div style="text-align: center">
        <!--分页组件-->
        <ul id="page"></ul>
    </div>
</div>


<%--分页插件--%>

<script>
    /*jquery的入口函数*/
    $(function () {
        //获取当前页
        var currentPage = ${book.pageNum};
        //获取总页数
        var totalPages = ${book.pages};
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: totalPages, //总页数
            useBootstrapTooltip: false,
            itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                console.log(page);
                // 业务处理
                //page: 表示当前页码
                /*获取pageNum隐藏域，给它赋值 page*/
                $("#pageNum").val(page);
                /*提交表单*/
                document.form1.submit();
            }
        });
    });

    <c:if test="${username == null}">
    if (confirm("当前账户未登录，请登录后操作！")){
        window.location.href = "/page/login.jsp"
    }
    </c:if>
</script>
</body>
</html>
